/**
 * 图片相关工具函数集合
 * 提供图片懒加载、默认图片生成、错误处理等功能
 */

/**
 * 随机emoji图标列表
 * 用于生成默认图标
 */
const emojiIcons = ['💡', '💻', '🧭', '🐠', '📊', '🧠'];

/**
 * 获取随机emoji图标
 * 从预定义的emoji列表中随机选择一个
 * @returns {string} 随机选择的emoji字符
 */
const getRandomEmoji = (): string => {
  const randomIndex = Math.floor(Math.random() * emojiIcons.length);
  return emojiIcons[randomIndex] || '💡';  // 如果获取失败，返回默认的灯泡图标
};

/**
 * 生成默认logo SVG
 * 创建一个包含随机emoji的SVG占位图
 * @returns {string} SVG数据URL
 */
export const generateDefaultLogo = (): string => {
  const emoji = getRandomEmoji();
  // 生成包含emoji的SVG图片数据URL
  return `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Crect width="40" height="40" fill="%23f0f0f0"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="20" fill="%23666"%3E${emoji}%3C/text%3E%3C/svg%3E`;
};

/**
 * 生成工具分类默认图片
 * 使用渐变色背景作为默认图片
 * @param title - 分类标题
 * @returns {string} SVG数据URL
 */
export const generateCategoryDefaultImage = (title: string): string => {
  const gradients = [
    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
  ];
  
  const _randomGradient = gradients[Math.floor(Math.random() * gradients.length)];
  const svgContent = `
    <svg width="144" height="89" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="144" height="89" fill="url(#grad1)"/>
      <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="white" font-size="12" font-family="Arial">${title}</text>
    </svg>
  `.trim();
  
  // 使用encodeURIComponent替代btoa来处理中文字符
  return `data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}`;
};

/**
 * 图片加载失败处理函数
 * 当图片加载失败时，替换为默认的emoji占位图
 * @param {Event} event - 图片加载错误事件
 */
export const handleImageError = (event: Event): void => {
  const img = event.target as HTMLImageElement;
  img.src = generateDefaultLogo();
};

/**
 * 分类图片加载失败处理函数
 * 当分类图片加载失败时，替换为默认图片
 * @param {Event} event - 图片加载错误事件
 * @param {string} title - 分类标题
 */
export const handleCategoryImageError = (event: Event, title: string): void => {
  const img = event.target as HTMLImageElement;
  img.src = generateCategoryDefaultImage(title);
};

/**
 * 初始化图片懒加载
 * 使用IntersectionObserver实现图片的懒加载，提升页面性能
 * 当图片进入视口50px范围内时开始加载
 */
export const initLazyLoading = (): void => {
  // 获取所有需要懒加载的图片
  const images = document.querySelectorAll('.lazy-image');
  // 创建IntersectionObserver实例
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 当图片进入视口时
      if (entry.isIntersecting) {
        const img = entry.target as HTMLImageElement;
        const src = img.getAttribute('data-src');
        if (src) {
          // 设置真实图片源并停止观察
          img.src = src;
          imageObserver.unobserve(img);
        }
      }
    });
  }, {
    rootMargin: '50px' // 提前50px开始加载，改善用户体验
  });
  
  // 为所有图片添加观察
  images.forEach(img => imageObserver.observe(img));
};

/**
 * 图片工具函数组合式函数
 * 提供图片处理相关的工具函数，便于在组件中使用
 * @returns {Object} 包含工具函数的对象
 */
export const useImageUtils = () => {
  return {
    generateDefaultLogo,           // 生成随机默认logo函数
    generateCategoryDefaultImage,  // 生成分类默认图片函数
    handleImageError,              // 图片错误处理函数
    handleCategoryImageError,      // 分类图片错误处理函数
    initLazyLoading                // 懒加载初始化函数
  };
};